<template>
    <div style="border: 1px solid #ccc;">

        <Toolbar
            style="border-bottom: 1px solid #ccc"
            :editor="editor"
            :defaultConfig="toolbarConfig"
            :mode="mode"
        />
        <Editor
            style="height: 350px; overflow-y: hidden;"
            v-model="html"
            :defaultConfig="editorConfig"
            :mode="mode"
            @onCreated="initEditor"
            @onChange="getHtml"
        />

    </div>
</template>

<script>
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import '@wangeditor/editor/dist/css/style.css';
import {upload} from '@/utils/api';
export default {

    data(){
        
        return{
            editor:null,
            html:this.content,
            toolbarConfig: {
                excludeKeys: ['fullScreen' ], //隐藏全屏按钮
             },
            editorConfig: { MENU_CONF:{
                uploadImage:{
                    async customUpload(file, insertFn) {
                        const promise = upload({
                            url:'/base-file/file/upload',
                            data:{file}
                        })
                        promise.then(res=>{
                            if(res&&res.code === 200){
                                insertFn(res.data.link, res.data.filename, res.data.link);
                            }
                        });
                    }

                },
                uploadVideo:{
                    async customUpload(file, insertFn) { 
                        let poster = '';                 
                        const promise = upload({
                            url:'/base-file/file/upload',
                            data:{file}
                        })
                        promise.then(res=>{
                            if(res&&res.code === 200){
                                insertFn(res.data.link, poster)
                            }
                        });
                        
                    }
                }
            },placeholder: '请输入内容...' },
            mode: 'default'
        }

    },
    props:['content'],
    methods:{
        initEditor(editor){
            this.editor = Object.seal(editor) 
        },
        getHtml(editor){
            // console.log('html',editor.getHtml());
            this.$emit('html',editor.getHtml(),editor.getText());
        }
    },
    components:{Toolbar,Editor},
    created(){
        // this.html = this.$props['content'];
    },
    beforeDestroy() {
        const editor = this.editor
        if (editor == null) return
        editor.destroy() // 组件销毁时，及时销毁编辑器
    },
    watch:{
        content:function(newValue,oldValue){
            // console.log('new',newValue);
            // console.log('old',oldValue);
            this.html = newValue;
        }
    }

}
</script>

<style>

</style>